*
{
    margin:0px;
    padding:0px;
}
/*-- reset --*/
*, *:after, *:before {
    box-sizing: border-box;
    padding:0;
    margin:0;
}
/*-- Login, Sign up display --*/
div.tab {
    display:inline-block;
    width:45%;
    transition: all ease .3s;
    padding:2rem;
    margin-bottom: 2rem;
}
div.tab h3{
    margin:0;
}
.signInUp {
    position:fixed;
    top:17%;
    left:50%;
    margin-left: -22%;
    width:44%;
    background-color: rgba(33, 33, 33, .5);
    color: #efefef;
    padding:1em;
    text-align:center;
    display:none;
    z-index:1500;
}


h1, h2, h3, h4, h5, p {
    text-align:center;
    margin-bottom:.5em;
}

/*-- form controls --*/
input[class*="form"] {
    width:50%;
    margin: 0 auto;
    border: 2px solid #eee;
    border-radius: 3px;
    padding:.3em;
    margin-bottom: 5px;
}
fieldset {
    border:none;
}
button {
    border: none;
    border-radius:3px;
    padding:1rem 3rem;
    background-color: #333;
    color: #fff;
    font-size:1.2em;
}
button:hover {
    transition: all ease .5s;
    background-color: #454545;
    color:#ffe4c5;
    transition-origin:bottom;
}
input[type="radio"] {
    display:none;
}

/*-- Login Section Animations --*/

#login:checked ~ .loginContainer .log-in {
    background:#333;
    transition: all ease .3s;
}
#login:checked ~ .loginContainer .login-replace {
    display:none;
}
#login:checked ~ .loginContainer .sign-up-replace {
    display:block;
}


/*-- Sign up section Animations--*/
#sign-up:checked ~ .loginContainer .sign-up {
    background: #333;
    transition: all ease .3s;
}
#sign-up:checked ~ .loginContainer .sign-up-replace {
    display:none;
}
#sign-up:checked ~ .loginContainer .login-replace {
    display:block;
}

/*!*-- show sign-up hint Animations--*!*/
/*#hint:checked ~ .loginContainer .sign-up {*/
    /*background: #0066CC;*/
    /*transition: all ease .3s;*/
/*}*/
/*#hint:checked ~ .loginContainer .sign-up-replace {*/
    /*display:none;*/
/*}*/
/*#hint:checked ~ .loginContainer .login-replace {*/
    /*display:block;*/
/*}*/

.pop {
    width:100%;
    height:100%;
    background-color:#000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
    position:absolute;
    left:0px;
    top:0px;
    display:none;
    z-index:1000;
}

#animated{
    -webkit-animation-duration:1.4s;
    animation-duration:1.4s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}